.moreDemo{
  width: 100%;
  .container{
    .page{
      align-self: flex-start;
      padding: .5rem .4rem;
      margin: .5rem auto 0;
      width: 75%;
      border-radius: 8px;
      background: $cardColor;
      box-shadow: 0 4px 8px 6px rgba(7,17,27,.06);
      transition: all .3s;
      .moreDemo-lists{
        padding: .2rem 0 .3rem;
      }
      .moreDemo-title{
        font-size: 2em;
      }
      .moreDemo-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        li:first-child{
          margin-left: 0;
        }
        li{
          margin-left: .2rem;
          a{
            display: block;
            transition: all .3s;
          }
        }
        li:hover{
          a{
            color:#49B1f5!important;
            transform: scale(1.1);
          }
        }
      }
      hr{
        margin-top: .25rem;
      }
      .showDemos{
        margin-top: .5rem;
      }
    }
    .page:hover{
      box-shadow: 0 4px 12px 12px rgba(7,17,27,.15);
    }
  }
  .lightHr{
    background-image: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
    height: .02rem;
    border: none;
  }
  .tabsHr{
    background: linear-gradient(135deg,#2cd8d5 0%, #6b8dd6 48%, #8e37d7 100%);
    height: .02rem;
    border: none;
  }
}

@media (max-width:530px) {
  .moreDemo-list li:nth-child(4){
    display: none;
  }
  .hoverLightButton{
    display: none;
  }
}